<template>
  <div :data-circle-pie-cid="cid" class="chart" />
</template>

<script>
// import 'echarts/lib/chart/pie'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/title'
// import 'echarts/lib/component/legend'
// import echarts from 'echarts'
import { ChartMixin } from '../mixin'
export default {
  name: 'CirclePie',
  mixins: [ChartMixin],
  methods: {
    setOptions() {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 100,
          right: 20,
          orient: 'vertical',
          data: ['已完成', '未完成']
        },
        color: ['#36A2EB', '#EBEEF5'],
        series: [
          {
            name: '完成率',
            type: 'pie',
            radius: ['35%', '65%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              { value: 335, name: '已完成' },
              { value: 310, name: '未完成' }
            ]
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
  .chart {
    width: 600px;
    height: 400px;
  }
</style>
